<template>
	<view class="invite">
		<view class="invite-bg">
			<image src="/static/image/bg-001.png" mode="widthFix"></image>

			<view class="bg-content">
				<view class="header-image">
				<view class="qrcode" ref="qrCodeUrl"></view>
				</view>
				<view class="title">
					邀请记录
				</view>
				<view class="tabs">
					<view class="tab-left">
						<button :class="current==0?'active':''" @tap="onWhole">全部</button>
						<button :class="current==1?'active':''" @tap="onNow">本期</button>
					</view>
					<view class="tab-right">
						全部邀请：{{ total_direct }}
					</view>
				</view>
				<view class="warn">
					注：活动最终解释归本公司所有
				</view>
			</view>
		</view>


		<!-- <view class="team-main overflow mlr-20 radius-30">
			<view class="team-main-li flex1" v-for="(item,index) in list" :key="index">
				<view class="team-main-img mr-20">
					<image :src="item.head_image" mode="aspectFill"></image>
				</view>
				<view class=" flex flex-1">
					<view class="">
						<view class="white size-28 mb-10">{{item.phone.substr(0,3)+"****"+item.phone.substr(7)}}</view>
						<view class="color-9 size-22">{{ item.create_time }}</view>
					</view>
					<view class="flex1 flex-middle">
						<view class="red size-28" :class="{'white':item.is_auth}">{{ item.is_auth == 0 ? '未' : '已' }}认证</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="content">
			<view class="title">
				<view>邀请用户</view>
				<view>时间</view>
				<view>状态</view>
			</view>

			<view class="content-list">
				<view class="list-item" v-for="(item,index) in list" :key="index">
					<view class="user">
						<text>{{ item.phone.substr(0,3)+"****"+item.phone.substr(7) }}</text>
						<text>UID:{{ item.id }}</text>
					</view>
					<view class="time">{{ item.create_time }}</view>
					<view class="status">{{ item.is_auth == 0 ? '未' : '已' }}认证</view>
				</view>
			</view>
		</view>

		<view class="btns">
			<button class="save" @click="copyUuid">保存邀请码</button>
			<button class="copy" @click="copyRegisterUrl">复制邀请链接</button>
		</view>
		
			
	</view>
	
</template>

<script>
	import empty from "@/components/empty.vue"
	
	import QRCode from 'qrcodejs2'

	export default {
		components: {
			empty,
			// ayQrcode
		},
		data() {
			return {
				total_direct: 0,
				// 已认证人数
				authCount: 0,
				list: [],
				userInfo: {},
				info: {},
				current: 0,
				// 二维码
				url: "",
		
			}
		},
		onShow() {
			this.getUserInfo()
			this.init();
			this.getfenXiang();
		
		},
		methods: {
			// 二维码
				   creatQrCode() {
					   console.log(this.$refs.qrCodeUrl.$el);
				        var qrcode = new QRCode(this.$refs.qrCodeUrl.$el, {
				            text: 'https://blog.csdn.net/weixin_42601136', // 需要转换为二维码的内容
				            width: 100,
				            height: 100,
				            colorDark: '#000000',
				            colorLight: '#ffffff',
				            correctLevel: QRCode.CorrectLevel.H
				        })
				    },
				
				
				
				
				
				
			// 全部
			onWhole() {
				this.current = 0
				this.$http('api/user/team').then(res => {
					console.log(res, "全");
					this.list = res;
				})
			},
			// 本期
			onNow() {
				this.current = 1
				this.$http('api/user/team', {
					version: "20230327"
				}).then(res => {
					console.log(res, "本");
					this.list = res;
				})
			},
			copyRegisterUrl() {
				this.$copyText(this.info.register_url).then(function(e) {
					uni.showToast({
						title: "邀请链接复制成功，快去分享吧!",
						icon: "none"
					})
				}, function(e) {
					uni.showToast({
						title: "复制失败!",
						icon: "none"
					})
				})
			},
			// this.info.uuid
			copyUuid() {
				this.$copyText(this.info.uuid).then(function(e) {
					uni.showToast({
						title: "邀请码成功，快去分享吧!",
						icon: "none"
					})
				}, function(e) {
					uni.showToast({
						title: "复制失败!",
						icon: "none"
					})
				})
			},

			getUserInfo() {
				this.$http('api/user/userInfo').then(res => {
					console.log(res);
					this.userInfo = res;
					this.total_direct = res.total_direct;
					this.authCount = res.renzheng_number
				})
			},
			init() {
				this.$http('api/user/team').then(res => {
					console.log(res, "全");
					this.list = res;
					// this.url=url
				})

			},

			getfenXiang() {
				this.$http('api/Newapi/fenXiang').then(res => {
					this.info = res;
					this.url = res.register_url
					console.log(this.url);
					// this.creatPoster()
					this.creatQrCode();
				
					
				})
			},
			
	
		}
	}
</script>
<style lang='scss' scoped>
	.invite {
		width: 100%;
		background: RGBA(242, 193, 97, 1);
		padding-bottom: 215rpx;
	}
	.qrcode{
		width: 200rpx;
		height: 200rpx;
	}

	.invite-bg {
		width: 100%;
		margin-top: calc(-44px - env(safe-area-inset-top));
		position: relative;

		&>image {
			width: 100%;
		}

		.bg-content {
			width: 100%;
			position: absolute;
			bottom: 0;
			padding: 0 40rpx 19rpx;

			.header-image {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 220rpx;
				height: 220rpx;
				background: white;
				border-radius: 24rpx;
				overflow: hidden;
				margin: 0 auto;

				
			}

			.title {
				margin-top: 108rpx;
				font-size: 36rpx;
				font-weight: 800;
				color: #FFFFFF;
			}

			.tabs {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 28rpx;

				.tab-left {
					display: flex;

					button {
						width: 140rpx;
						height: 60rpx;
						line-height: 60rpx;
						background: rgba(240, 214, 155, 1);
						border: 2rpx solid rgba(240, 214, 155, 1);
						color: rgba(255, 255, 255, 1);
						border-radius: 30rpx;
						font-size: 26rpx;
						font-weight: 500;
						margin-right: 17rpx;

						&::after {
							display: none;
						}

						&.active {
							color: #7CC5C1;
							background: #EBC270;
							border: 2rpx solid #B1D5D3;
						}
					}
				}

				.tab-right {
					font-size: 24rpx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}

			.warn {
				margin-top: 35rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}

	.content {
		width: 686rpx;
		background: #EDC97F;
		border-radius: 10rpx 10rpx 0 0;
		margin: 0 auto;

		.title {
			display: flex;
			align-items: center;
			height: 76rpx;
			padding: 0 28rpx;
			border-bottom: 2rpx solid rgba(255, 255, 255, 1);

			view {
				font-size: 20rpx;
				font-weight: 500;
				color: #FFFFFF;

				&:nth-child(1) {
					width: 268rpx;
				}

				&:nth-child(2) {
					width: 254rpx;
				}

				&:nth-child(3) {
					flex: 1;
				}
			}
		}

		.content-list {
			.list-item {
				display: flex;
				align-items: center;
				height: 120rpx;
				padding: 0 28rpx;

				&:nth-child(2n) {
					background: rgba(235, 198, 118, 1);
				}

				.user {
					display: flex;
					flex-direction: column;
					width: 268rpx;

					text:first-child {
						font-size: 30rpx;
						font-weight: 800;
						color: #FFFFFF;
					}

					text:last-child {
						font-size: 24rpx;
						font-weight: 400;
						color: #FFFFFF;
					}
				}

				.time {
					width: 254rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFFFF;
				}

				.status {
					width: 119rpx;
					height: 56rpx;
					background: #F0D69B;
					border-radius: 28px;
					font-size: 22rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 56rpx;
				}
			}
		}
	}

	.btns {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 47rpx 60rpx 47rpx;
		position: fixed;
		bottom: 0;


		button::after {
			display: none;
		}

		.save {
			width: 288rpx;
			height: 77rpx;
			background: #B1D5D3;
			border-radius: 39rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #FFFFFF;
		}

		.copy {
			width: 288rpx;
			height: 77rpx;
			background: #EECB9E;
			border-radius: 39rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #030000;
		}
	}
</style>
